<template>
    <ChoiceExercise
        class="english-choice-chinese-exercise"
        title="词意测试"
        :actived="actived"
        :exercise="exercise"
    >
        <SimpleWord class="mb-4" :word="exercise.word" />

        <PhoneticSymbol
            class="mb-4"
            :autoplay="autoplay"
            :word="exercise.word"
        />

        <WordMeaning
            :word="exercise.word"
            :class="
                exercise.resultCorrect == undefined
                    ? 'invisible select-none'
                    : ''
            "
        />
    </ChoiceExercise>
</template>

<script setup lang="ts">
    import { EnglishChoiceChineseExercise } from "../../model"
    import PhoneticSymbol from "../word/PhoneticSymbol.vue"
    import ChoiceExercise from "./ChoiceExercise.vue"
    import SimpleWord from "../word/SimpleWord.vue"
    import WordMeaning from "../word/WordMeaning.vue"

    defineProps<{
        exercise: EnglishChoiceChineseExercise
        autoplay?: boolean
        actived: boolean
    }>()
</script>
